<template>
  <div>
    <BasicTable @register="registerTable" >
    </BasicTable>
    <FormDetail @register="registerFormDetail"/>
    <ModalWrapper @register="registerCheckBill">
      <template v-slot="{ data }">
        <CheckBillList :params="data"/>
      </template>
    </ModalWrapper>
  </div>
</template>
<script lang="ts" name="CheckBatch" setup>
import { ref } from 'vue';
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema } from './data';
import { pageCheckBatch, refreshCheck } from './api';
import { useMessage } from '/@/hooks/web/useMessage';
import FormDetail from './Detail.vue';
import { useModal, ModalWrapper } from '/@/components/Modal';
import CheckBillList from '../checkDiff/List.vue'
import { modalProps } from 'ant-design-vue/es/modal/Modal';
const { t } = useI18n('');
const { createMessage } = useMessage();
const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
const [registerCheckBill, { openModal : openCheckBillList }] = useModal();
const actionColumn: BasicColumn = {
  width: 160,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    {
      label: '重新对账',
      auth: Auth.refreshBillCheck,
      ifShow: () => record.status === '1',
      onClick: handleRefreshBillCheck.bind(null, record),
    },
    {
      label: '差异账单',
      ifShow: () => record.diffCount > 0,
      onClick: handleGoDiffPage.bind(null, record),
    },
  ]
}

const [registerTable, { reload }] = useTable({
  title: '对账批次',
  api: pageCheckBatch,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
    fieldMapToTime: [['billDate', ['beginDate', 'endDate'], 'YYYY-MM-DD']],
  },
  showIndexColumn: false,
  showTableSetting: true,
  useSearchForm: true,
  pagination: true,
  canResize: true,
  rowKey: 'batchNo',
  actionColumn,
})


const handleRefreshBillCheck = async (record) => {
  const key = "loading"
  // 后期可以改成消息通知的方式, 对账一般都比较耗时, 对账结束后通过消息推送到客户端
  createMessage.loading({ 
    content: '对账中.., 请耐心等待',
    key
  })
  try {
    await refreshCheck({ batchNo: record.batchNo })
    createMessage.success('对账成功')
    reload()
  } finally {
    createMessage.destroy(key)
  }
}
const handleDetail = (record) => openFormDetail(true, { record })
const handleGoDiffPage = (record) => {
  openCheckBillList(true, {
    title: `差异账单列表`,
    batchNo: record.batchNo,
    modalProps: {
      showOkBtn: false
    }
  })
}

</script>
